<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>AI 电脑管家 - 七牛云秋招项目</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
            background: #1a1a1a;
            color: #ffffff;
            height: 100vh;
            display: flex;
            flex-direction: column;
            overflow: hidden;
        }

        .header {
            background: #1a1a1a;
            border-bottom: 1px solid #333;
            padding: 1rem 2rem;
            display: flex;
            align-items: center;
            justify-content: space-between;
        }

        .header-left {
            display: flex;
            align-items: center;
            gap: 1rem;
        }

        .logo {
            width: 32px;
            height: 32px;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            border-radius: 8px;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-size: 1.2rem;
            font-weight: bold;
        }

        .nav-tabs {
            display: flex;
            gap: 2rem;
            margin-left: 2rem;
        }

        .nav-tab {
            color: #666;
            text-decoration: none;
            font-weight: 500;
            transition: color 0.3s ease;
            cursor: pointer;
        }

        .nav-tab.active {
            color: #ffffff;
        }

        .nav-tab:hover {
            color: #ffffff;
        }

        .header-right {
            display: flex;
            align-items: center;
            gap: 1rem;
        }

        .user-profile {
            background: #333;
            border: none;
            border-radius: 6px;
            padding: 0.5rem 1rem;
            color: #ffffff;
            font-size: 0.9rem;
            cursor: pointer;
            transition: background 0.3s ease;
        }

        .user-profile:hover {
            background: #444;
        }

        .main-content {
            flex: 1;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            padding: 2rem;
            position: relative;
        }

        .ai-input-container {
            width: 100%;
            max-width: 800px;
            margin-bottom: 2rem;
        }

        .ai-input-box {
            background: #2a2a2a;
            border: 2px solid #333;
            border-radius: 12px;
            padding: 1.5rem;
            transition: border-color 0.3s ease;
            position: relative;
        }

        .ai-input-box:focus-within {
            border-color: #667eea;
        }

        .ai-input {
            width: 100%;
            background: transparent;
            border: none;
            outline: none;
            color: #ffffff;
            font-size: 1.1rem;
            line-height: 1.5;
            resize: none;
            min-height: 60px;
            max-height: 200px;
        }

        .ai-input::placeholder {
            color: #666;
        }

        .input-controls {
            display: flex;
            align-items: center;
            gap: 1rem;
            margin-top: 1rem;
        }

        .model-selector {
            display: flex;
            align-items: center;
            gap: 0.5rem;
            background: #333;
            border: 1px solid #444;
            border-radius: 8px;
            padding: 0.5rem 1rem;
            cursor: pointer;
            transition: all 0.3s ease;
        }

        .model-selector:hover {
            background: #444;
        }

        .model-icon {
            width: 16px;
            height: 16px;
            background: #667eea;
            border-radius: 3px;
        }

        .model-text {
            color: #ffffff;
            font-size: 0.9rem;
        }

        .repo-selector {
            display: flex;
            align-items: center;
            gap: 0.5rem;
            background: #333;
            border: 1px solid #444;
            border-radius: 8px;
            padding: 0.5rem 1rem;
            cursor: pointer;
            transition: all 0.3s ease;
        }

        .repo-selector:hover {
            background: #444;
        }

        .repo-icon {
            width: 16px;
            height: 16px;
            background: #666;
            border-radius: 3px;
        }

        .repo-text {
            color: #ffffff;
            font-size: 0.9rem;
        }

        .input-actions {
            display: flex;
            gap: 0.5rem;
            margin-left: auto;
        }

        .action-btn {
            width: 36px;
            height: 36px;
            background: #333;
            border: 1px solid #444;
            border-radius: 8px;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: all 0.3s ease;
            color: #666;
        }

        .action-btn:hover {
            background: #444;
            color: #ffffff;
        }

        .voice-button {
            width: 48px;
            height: 48px;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            border: none;
            border-radius: 12px;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: all 0.3s ease;
            color: white;
            font-size: 1.2rem;
            margin-left: 1rem;
        }

        .voice-button:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
        }

        .voice-button.listening {
            background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
            animation: listening 1s infinite;
        }

        .voice-button.processing {
            background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
            animation: processing 1.5s infinite;
        }

        @keyframes listening {
            0%, 100% { transform: scale(1); }
            50% { transform: scale(1.05); }
        }

        @keyframes processing {
            0%, 100% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }

        .quick-actions {
            width: 100%;
            max-width: 800px;
        }

        .quick-actions-title {
            color: #666;
            font-size: 0.9rem;
            margin-bottom: 1rem;
            text-align: center;
        }

        .quick-actions-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 1rem;
        }

        .quick-action {
            background: #2a2a2a;
            border: 1px solid #333;
            border-radius: 12px;
            padding: 1.5rem;
            cursor: pointer;
            transition: all 0.3s ease;
            display: flex;
            align-items: center;
            gap: 1rem;
        }

        .quick-action:hover {
            background: #333;
            border-color: #444;
            transform: translateY(-2px);
        }

        .quick-action-icon {
            width: 40px;
            height: 40px;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            border-radius: 10px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.2rem;
            color: white;
        }

        .quick-action-content {
            flex: 1;
        }

        .quick-action-title {
            color: #ffffff;
            font-weight: 600;
            margin-bottom: 0.25rem;
        }

        .quick-action-desc {
            color: #666;
            font-size: 0.85rem;
            line-height: 1.4;
        }

        .chat-messages {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: #1a1a1a;
            padding: 2rem;
            overflow-y: auto;
            display: none;
            flex-direction: column;
            gap: 1.5rem;
        }

        .chat-messages.active {
            display: flex;
        }

        .message {
            display: flex;
            gap: 1rem;
            animation: slideIn 0.3s ease;
        }

        @keyframes slideIn {
            from { opacity: 0; transform: translateY(10px); }
            to { opacity: 1; transform: translateY(0); }
        }

        .message-avatar {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.1rem;
            flex-shrink: 0;
        }

        .message.user .message-avatar {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
        }

        .message.ai .message-avatar {
            background: linear-gradient(135deg, #4ade80 0%, #22c55e 100%);
            color: white;
        }

        .message-content {
            flex: 1;
            background: #2a2a2a;
            padding: 1rem 1.5rem;
            border-radius: 15px;
            border: 1px solid #333;
        }

        .message.ai .message-content {
            background: linear-gradient(135deg, #1e3a8a 0%, #1e40af 100%);
            border-color: #3b82f6;
        }

        .message-text {
            line-height: 1.6;
            font-size: 1rem;
        }

        .message-time {
            font-size: 0.8rem;
            color: #666;
            margin-top: 0.5rem;
        }

        .execution-status {
            background: #1e3a8a;
            border: 1px solid #3b82f6;
            border-radius: 10px;
            padding: 0.75rem 1rem;
            margin-top: 0.5rem;
            font-size: 0.9rem;
        }

        .execution-status.success {
            background: #064e3b;
            border-color: #10b981;
            color: #10b981;
        }

        .execution-status.error {
            background: #7f1d1d;
            border-color: #ef4444;
            color: #ef4444;
        }

        .typing-indicator {
            display: flex;
            align-items: center;
            gap: 0.5rem;
            color: #666;
            font-size: 0.9rem;
            margin-top: 0.5rem;
        }

        .typing-dots {
            display: flex;
            gap: 0.25rem;
        }

        .typing-dot {
            width: 6px;
            height: 6px;
            background: #667eea;
            border-radius: 50%;
            animation: typing 1.4s infinite;
        }

        .typing-dot:nth-child(2) { animation-delay: 0.2s; }
        .typing-dot:nth-child(3) { animation-delay: 0.4s; }

        @keyframes typing {
            0%, 60%, 100% { transform: translateY(0); }
            30% { transform: translateY(-10px); }
        }

        .footer {
            background: #1a1a1a;
            border-top: 1px solid #333;
            padding: 1rem 2rem;
            text-align: center;
            color: #666;
            font-size: 0.9rem;
        }

        /* 滚动条样式 */
        .chat-messages::-webkit-scrollbar {
            width: 6px;
        }

        .chat-messages::-webkit-scrollbar-track {
            background: #1a1a1a;
        }

        .chat-messages::-webkit-scrollbar-thumb {
            background: #333;
            border-radius: 3px;
        }

        .chat-messages::-webkit-scrollbar-thumb:hover {
            background: #444;
        }

        .status-indicator {
            position: fixed;
            bottom: 1rem;
            right: 1rem;
            background: #2a2a2a;
            border: 1px solid #333;
            border-radius: 8px;
            padding: 0.5rem 1rem;
            font-size: 0.8rem;
            color: #666;
        }

        .status-dot {
            width: 8px;
            height: 8px;
            background: #4ade80;
            border-radius: 50%;
            display: inline-block;
            margin-right: 0.5rem;
            animation: blink 1.5s infinite;
        }

        @keyframes blink {
            0%, 50% { opacity: 1; }
            51%, 100% { opacity: 0.3; }
        }
    </style>
</head>
<body>
    <div class="header">
        <div class="header-left">
            <div class="logo">AI</div>
            <div class="nav-tabs">
                <div class="nav-tab active">Agents</div>
                <div class="nav-tab">Dashboard</div>
            </div>
        </div>
        <div class="header-right">
            <button class="user-profile" onclick="openMiniWindow()">小助手</button>
        </div>
    </div>

    <div class="main-content">
        <div class="ai-input-container">
            <div class="ai-input-box">
                <textarea 
                    class="ai-input" 
                    id="aiInput" 
                    placeholder="Ask AI to control your computer, play music, write articles, or create complex workflows..."
                    rows="3"
                ></textarea>
                <div class="input-controls">
                    <div class="model-selector" onclick="showModelSelector()">
                        <div class="model-icon"></div>
                        <span class="model-text">GPT-4</span>
                    </div>
                    <div class="repo-selector" onclick="showRepoSelector()">
                        <div class="repo-icon"></div>
                        <span class="repo-text">Select repository</span>
                    </div>
                    <div class="input-actions">
                        <div class="action-btn" title="Attach file">
                            📎
                        </div>
                        <div class="action-btn" title="Upload image">
                            🖼️
                        </div>
                        <div class="action-btn" title="Send">
                            ⬆️
                        </div>
                    </div>
                </div>
            </div>
            <button class="voice-button" id="voiceButton" onclick="toggleVoiceRecording()">
                🎤
            </button>
        </div>

        <div class="quick-actions">
            <div class="quick-actions-title">Try these examples to get started</div>
            <div class="quick-actions-grid">
                <div class="quick-action" onclick="sendQuickMessage('播放一首轻音乐')">
                    <div class="quick-action-icon">🎵</div>
                    <div class="quick-action-content">
                        <div class="quick-action-title">播放音乐</div>
                        <div class="quick-action-desc">播放您喜欢的音乐，控制音量</div>
                    </div>
                </div>
                <div class="quick-action" onclick="sendQuickMessage('帮我写一篇关于AI的文章')">
                    <div class="quick-action-icon">📝</div>
                    <div class="quick-action-content">
                        <div class="quick-action-title">写文章</div>
                        <div class="quick-action-desc">AI 帮您创作高质量内容</div>
                    </div>
                </div>
                <div class="quick-action" onclick="sendQuickMessage('检查系统状态并优化')">
                    <div class="quick-action-icon">🔧</div>
                    <div class="quick-action-content">
                        <div class="quick-action-title">系统优化</div>
                        <div class="quick-action-desc">智能检查和优化系统性能</div>
                    </div>
                </div>
                <div class="quick-action" onclick="sendQuickMessage('创建一个工作流程')">
                    <div class="quick-action-icon">🔄</div>
                    <div class="quick-action-content">
                        <div class="quick-action-title">工作流程</div>
                        <div class="quick-action-desc">组合多个功能实现复杂场景</div>
                    </div>
                </div>
                <div class="quick-action" onclick="sendQuickMessage('打开浏览器并搜索七牛云')">
                    <div class="quick-action-icon">🌐</div>
                    <div class="quick-action-content">
                        <div class="quick-action-title">浏览器控制</div>
                        <div class="quick-action-desc">智能控制浏览器操作</div>
                    </div>
                </div>
                <div class="quick-action" onclick="sendQuickMessage('整理桌面文件')">
                    <div class="quick-action-icon">📁</div>
                    <div class="quick-action-content">
                        <div class="quick-action-title">文件管理</div>
                        <div class="quick-action-desc">智能整理和管理文件</div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="chat-messages" id="chatMessages">
        <!-- 聊天消息将在这里显示 -->
    </div>

    <div class="footer">
        <p>© 2024 AI 电脑管家 - 七牛云秋招项目 | 基于大模型的智能桌面助手</p>
    </div>

    <div class="status-indicator">
        <span class="status-dot"></span>
        <span id="statusText">AI 在线</span>
    </div>

    <script>
        const { ipcRenderer } = require('electron');

        let isListening = false;
        let isProcessing = false;
        let recognition = null;
        let currentView = 'main';

        // 初始化
        document.addEventListener('DOMContentLoaded', () => {
            updateStatus('AI 系统已就绪，等待您的指令...');
            setupEventListeners();
            initializeSpeechRecognition();
        });

        // 设置事件监听器
        function setupEventListeners() {
            const aiInput = document.getElementById('aiInput');
            const sendButton = document.querySelector('.action-btn:last-child');

            // 回车发送消息
            aiInput.addEventListener('keydown', (e) => {
                if (e.key === 'Enter' && !e.shiftKey) {
                    e.preventDefault();
                    sendMessage();
                }
            });

            // 自动调整输入框高度
            aiInput.addEventListener('input', () => {
                aiInput.style.height = 'auto';
                aiInput.style.height = Math.min(aiInput.scrollHeight, 200) + 'px';
            });

            // 发送按钮点击
            sendButton.addEventListener('click', sendMessage);
        }

        // 初始化语音识别
        function initializeSpeechRecognition() {
            if ('webkitSpeechRecognition' in window || 'SpeechRecognition' in window) {
                const SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;
                recognition = new SpeechRecognition();
                recognition.continuous = false;
                recognition.interimResults = false;
                recognition.lang = 'zh-CN';

                recognition.onstart = () => {
                    isListening = true;
                    updateVoiceButton('listening');
                    updateStatus('正在听取您的语音...');
                };

                recognition.onresult = (event) => {
                    const transcript = event.results[0][0].transcript;
                    document.getElementById('aiInput').value = transcript;
                    updateStatus('语音识别完成，点击发送或继续说话');
                };

                recognition.onerror = (event) => {
                    console.error('语音识别错误:', event.error);
                    updateStatus('语音识别出错，请重试');
                    updateVoiceButton('idle');
                };

                recognition.onend = () => {
                    isListening = false;
                    updateVoiceButton('idle');
                    if (!isProcessing) {
                        updateStatus('AI 系统已就绪，等待您的指令...');
                    }
                };
            } else {
                updateStatus('您的浏览器不支持语音识别功能');
            }
        }

        // 切换语音录制
        function toggleVoiceRecording() {
            if (!recognition) {
                updateStatus('语音识别不可用');
                return;
            }

            if (isListening) {
                recognition.stop();
            } else {
                recognition.start();
            }
        }

        // 更新语音按钮状态
        function updateVoiceButton(state) {
            const button = document.getElementById('voiceButton');
            button.className = `voice-button ${state}`;
            
            const icons = {
                'idle': '🎤',
                'listening': '🔴',
                'processing': '⚙️'
            };
            button.textContent = icons[state];
        }

        // 更新状态文本
        function updateStatus(message) {
            document.getElementById('statusText').textContent = message;
        }

        // 发送消息
        function sendMessage() {
            const input = document.getElementById('aiInput');
            const message = input.value.trim();
            
            if (!message || isProcessing) return;

            // 切换到聊天视图
            showChatView();
            addMessage('user', message);
            input.value = '';
            input.style.height = 'auto';

            // 显示正在处理状态
            showTypingIndicator();
            isProcessing = true;
            updateVoiceButton('processing');
            
            // 处理 AI 请求
            setTimeout(() => {
                hideTypingIndicator();
                processAIRequest(message);
                isProcessing = false;
                updateVoiceButton('idle');
            }, 1000 + Math.random() * 2000);
        }

        // 快速消息
        function sendQuickMessage(message) {
            document.getElementById('aiInput').value = message;
            sendMessage();
        }

        // 显示聊天视图
        function showChatView() {
            currentView = 'chat';
            document.querySelector('.main-content').style.display = 'none';
            document.getElementById('chatMessages').classList.add('active');
        }

        // 处理 AI 请求
        function processAIRequest(userMessage) {
            const responses = [
                '我理解您的需求。正在为您执行...',
                '正在处理您的请求，请稍候...',
                'AI 正在分析并执行您的指令...',
                '已收到您的指令，正在智能处理...'
            ];
            
            const randomResponse = responses[Math.floor(Math.random() * responses.length)];
            addMessage('ai', randomResponse);
            
            // 模拟执行结果
            setTimeout(() => {
                const executionResults = [
                    '✅ 任务执行成功',
                    '🎯 操作已完成',
                    '⚡ 处理速度提升 30%',
                    '🔧 系统已优化'
                ];
                const randomResult = executionResults[Math.floor(Math.random() * executionResults.length)];
                addExecutionStatus(randomResult, 'success');
            }, 1500);
        }

        // 添加消息到聊天
        function addMessage(sender, text) {
            const messagesContainer = document.getElementById('chatMessages');
            const messageDiv = document.createElement('div');
            messageDiv.className = `message ${sender}`;
            
            const avatar = sender === 'user' ? '👤' : '🤖';
            const time = new Date().toLocaleTimeString('zh-CN', { 
                hour: '2-digit', 
                minute: '2-digit' 
            });

            messageDiv.innerHTML = `
                <div class="message-avatar">${avatar}</div>
                <div class="message-content">
                    <div class="message-text">${text}</div>
                    <div class="message-time">${time}</div>
                </div>
            `;

            messagesContainer.appendChild(messageDiv);
            messagesContainer.scrollTop = messagesContainer.scrollHeight;
        }

        // 添加执行状态
        function addExecutionStatus(text, type) {
            const messagesContainer = document.getElementById('chatMessages');
            const statusDiv = document.createElement('div');
            statusDiv.className = `execution-status ${type}`;
            statusDiv.textContent = text;
            messagesContainer.appendChild(statusDiv);
            messagesContainer.scrollTop = messagesContainer.scrollHeight;
        }

        // 显示正在处理指示器
        function showTypingIndicator() {
            const messagesContainer = document.getElementById('chatMessages');
            const typingDiv = document.createElement('div');
            typingDiv.className = 'typing-indicator';
            typingDiv.innerHTML = `
                <span>AI 正在处理您的请求</span>
                <div class="typing-dots">
                    <div class="typing-dot"></div>
                    <div class="typing-dot"></div>
                    <div class="typing-dot"></div>
                </div>
            `;
            messagesContainer.appendChild(typingDiv);
            messagesContainer.scrollTop = messagesContainer.scrollHeight;
        }

        // 隐藏正在处理指示器
        function hideTypingIndicator() {
            const typingIndicator = document.querySelector('.typing-indicator');
            if (typingIndicator) {
                typingIndicator.remove();
            }
        }

        // 显示模型选择器
        function showModelSelector() {
            // 这里可以添加模型选择逻辑
            console.log('显示模型选择器');
        }

        // 显示仓库选择器
        function showRepoSelector() {
            // 这里可以添加仓库选择逻辑
            console.log('显示仓库选择器');
        }

        // 模拟 AI 功能
        async function showMessage() {
            try {
                const result = await ipcRenderer.invoke('show-message-box', {
                    type: 'info',
                    title: 'AI 电脑管家',
                    message: '这是一个来自 AI 助手的智能消息！',
                    detail: 'AI 系统正在为您提供个性化的电脑控制服务。'
                });
                updateStatus(`用户响应: ${result.response === 0 ? '确定' : '取消'}`);
            } catch (error) {
                updateStatus(`错误: ${error.message}`);
            }
        }

        async function openFile() {
            try {
                const result = await ipcRenderer.invoke('show-open-dialog', {
                    properties: ['openFile'],
                    filters: [
                        { name: '媒体文件', extensions: ['mp3', 'mp4', 'avi', 'mov'] },
                        { name: '文档文件', extensions: ['txt', 'doc', 'pdf'] },
                        { name: '所有文件', extensions: ['*'] }
                    ]
                });
                
                if (!result.canceled) {
                    updateStatus(`已加载文件: ${result.filePaths[0]}`);
                    addMessage('ai', `已成功加载文件，正在为您处理...`);
                } else {
                    updateStatus('用户取消了文件选择');
                }
            } catch (error) {
                updateStatus(`错误: ${error.message}`);
            }
        }

        async function getAppInfo() {
            try {
                const version = await ipcRenderer.invoke('get-app-version');
                updateStatus(`AI 电脑管家版本: ${version}`);
                addMessage('ai', `当前 AI 系统版本: ${version}，所有功能正常运行。`);
            } catch (error) {
                updateStatus(`错误: ${error.message}`);
            }
        }

        // 打开小窗口
        function openMiniWindow() {
            ipcRenderer.invoke('show-mini-window');
        }
    </script>
</body>
</html>